<template>
  <div class="content-body">
    <div
      class="content-header"
      :style="{
        fontSize:
          setting.titleFontSize === null
            ? '1rem'
            : setting.titleFontSize + 'px',
        color: setting.titleFontColor === null ? '' : setting.titleFontColor
      }"
    >
      {{ dataSource[setting.title] }}
    </div>
    <div
      v-if="
        dataSource[setting.fbt] !== undefined &&
          dataSource[setting.fbt] !== null
      "
      class="content-header-title"
      :style="{
        fontSize:
          setting.fbtFontSize === null ? '1rem' : setting.fbtFontSize + 'px',
        color: setting.fbtFontColor === null ? '' : setting.fbtFontColor
      }"
    >
      {{ dataSource[setting.fbt] }}
    </div>
    <div class="content-letter">
      <div
        class="content-letter-item"
        :style="{
          fontSize:
            setting.leftFontSize === null
              ? '1rem'
              : setting.leftFontSize + 'px',
          color: setting.leftFontColor === null ? '' : setting.leftFontColor
        }"
      >
        {{ (setting.leftTitleName === undefined|| setting.leftTitleName=== '')? '':setting.leftTitleName }}
        {{ (dataSource[setting.leftTitle] === undefined|| dataSource[setting.leftTitle]=== '') ? '': ':'+ dataSource[setting.leftTitle] }}
      </div>
      <div
        class="content-letter-item right"
        :style="{
          fontSize:
            setting.rightFontSize === null
              ? '1rem'
              : setting.rightFontSize + 'px',
          color: setting.rightFontColor === null ? '' : setting.rightFontColor
        }"
      >
        {{ (setting.rightTitleName === undefined|| setting.rightTitleName=== '')? '':setting.rightTitleName }}
        {{ (dataSource[setting.rightTitle] === undefined|| dataSource[setting.rightTitle]=== '') ? '': ':'+ dataSource[setting.rightTitle] }}
      </div>
    </div>
    <div class="content-article" v-html="htmlValue" />
  </div>
</template>
<script>
import { getToken } from '@/utils/auth'
import { requestGet } from '@/api/system/common'
export default {
  name: 'PortalNewsPcEntityV1', // 新闻类列表详情页面
  props: {
    params: {
      type: Array
    },
    temp: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      tid: null, // 模版主键
      query: null,
      dataSource: {
        title: '', // 主标题
        titleFontSize: '', // 主标题文字大小
        titleFontColor: '', // 主标题字体颜色
        fbt: '', // 副标题
        fbtFontSize: null, // 副标题字体大小
        fbtFontColor: '', // 副标题颜色
        leftTitleName: '', // 左边显示项名称
        leftTitle: '', // 左边关联字段
        leftFontSize: '', // 左边字体大小
        leftFontColor: '', // 左边字体颜色
        rightTitleName: '', // 右边显示名称
        rightTitle: '', // 右边关联字段
        rightFontSize: '', // 右边字体大小
        rightFontColor: '', // 右边字体颜色
        content: '' // 内容关联字段
      },
      setting: {
        titleFontColor: null,
        leftFontColor: null,
        rightFontColor: null
      },
      borderStyle: {},
      htmlValue: ''
    }
  },
  computed: {
    themes() {
      return this.$store.getters.theme
    }
  },
  watch: {
    temp: {
      handler(newName, oldName) {
        console.log(newName)
        if (undefined !== newName.pzx && newName.pzx !== null) {
          this.setting = JSON.parse(newName.pzx)
          this.setting.titleFontColor = this.borderStyle.color
          this.setting.leftFontColor = this.borderStyle.color
          this.setting.rightFontColor = this.borderStyle.color
        }
        this.tid = newName.id
        this.query = this.params
        this.initObject()
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  methods: {
    initObject() {
      // todo:: 这里需要拼接参数
      const params = { tid: this.tid }
      if (this.query !== null && this.query.length > 0) {
        this.query.forEach(item => {
          params[item.code] = item.value
        })
      }
      if (getToken()) {
        requestGet('rest/api/temp/v1/entity/analysis/data', params)
          .then(res => {
            const { data } = res
            if (undefined !== data.data && data.data !== null) {
              this.dataSource = data.data
              if (undefined !== this.dataSource && this.dataSource !== null) {
                if (this.setting.replace) {
                  // 需要替换
                  this.dataSource[this.setting.content] = this.dataSource[
                    this.setting.content
                  ]
                    .replaceAll(
                      'href="/',
                      'href="' + this.setting.replaceUrl + '/'
                    )
                    .replaceAll(
                      'src="/',
                      'src="' + this.setting.replaceUrl + '/'
                    )
                }
                console.log(this.dataSource[this.setting.content])
                this.htmlValue = this.dataSource[this.setting.content]// this.escapeHtml(this.dataSource[this.setting.content])
              }
            }
          })
          .catch(() => {
            console.log(1)
          })
      } else {
        requestGet('rest/api/guest/temp/v1/entity/analysis/data', params)
          .then(res => {
            const { data } = res
            this.dataSource = data
            if (undefined !== this.dataSource && this.dataSource !== null) {
              if (this.setting.replace) {
                // 需要替换
                this.dataSource[this.setting.content] = this.dataSource[
                  this.setting.content
                ]
                  .replaceAll(
                    'href="/',
                    'href="' + this.setting.replaceUrl + '/'
                  )
                  .replaceAll(
                    'src="/',
                    'src="' + this.setting.replaceUrl + '/'
                  )
              }
            }
          })
          .catch(() => {
            console.log(1)
          })
      }
    }
  }
}
</script>

<style scoped>
.content-body {
  width: 100%;
  height: 100%;
  padding: 0 15px;
  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
  min-height: 50rem;
  background-color: #ffffff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
}
.content-header {
  width: 100%;
  min-height: 40px;
  line-height: 40px;
  text-align: center;
  padding: 20px 0;
  box-sizing: border-box;
  font-weight: bold;
}
.content-header-title {
  width: 100%;
  min-height: 20px;
  line-height: 20px;
  text-align: center;
}
.content-letter {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  flex-flow: row nowrap;
}
.content-letter-item {
  flex: 0 1 auto;
  width: 50%;
  height: 40px;
  line-height: 40px;
  text-align: left;
  padding: 0px 5px;
  box-sizing: border-box;
}
.right {
  text-align: right;
}
.content-article {
  width: 100%;
  height: auto;
  padding: 20px 5px;
  box-sizing: border-box;
}
</style>
